<template>
  <div class="gray">
    <search></search>
    <van-tabs @click="onClick" v-model="activeName">
      <van-tab v-for="item in list" :title="item.name" :key="item.id" :name='item.name'>
        <div class="info">
          <p>{{ item.name }}</p>
          <p>{{ item.front_desc }}</p>
        </div>
        <ul>
          <li v-for="item in dataList" :key="item.id" @click="infoRoute(item.id)">
            <img :src="item.list_pic_url" height="150" />
            <p>{{ item.name }}</p>
            <p>￥{{ item.retail_price }}</p>
          </li>
        </ul>
        <p class="show" v-if="isShow">数据库暂无数据......</p>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import search from "@/components/search";
import { categoryNav, goodsList } from "@/api/category/index.js";
export default {
  data() {
    return {
      list: [],
      dataList: [],
      isShow:false,
      activeName:""
    };
  },
  methods: {
    init() {
      categoryNav({
        id: this.$route.query.ids,
      }).then((res) => {
        this.activeName = res.data.currentNav.name;
        this.list = res.data.navData;
        console.log(res);
        if (res.status == "200") {
          goodsList({
            categoryId: res.data.navData[0].id,
          }).then((res) => {
            this.dataList = res.data.data;
          });
        }
      });
    },
    infoRoute(id){
        this.$router.push({path:"/home/info",query:{ids:id}})
    },
    onClick(name){
      goodsList({
        categoryId: this.list[name].id,
      }).then((res) => {
        this.dataList = res.data.data;
        if(this.dataList.length < 1){
            this.isShow = true;
        }else{
            this.isShow = false;
        }
      });
    },
  },
  created() {
    this.init();
  },
  components: {
    search,
  },
};
</script>

<style scoped lang="scss">
.gray {
  background-color: rgb(244, 244, 244);
  height: 100%;
}
::v-deep .van-tabs__wrap {
  padding-bottom: 0;
  margin-bottom: 10px;
}
.info {
  padding: 15px;
  margin-bottom: 3px;
  background-color: #fff;
  p {
    margin-bottom: 0.24rem;
    font-size: 0.4rem;
    color: #333;
  }
  p:last-child {
    display: block;
    height: 0.32rem;
    font-size: 0.32rem;
    color: #999;
  }
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 4.96667rem;
    background-color: #fff;
    padding: 7.5px 0;
    margin-bottom: 3px;
    img {
      padding: 0 17px;
      width: 151px;
    }
    p {
      margin: 7.5px 0 11px 0;
      padding: 0 10px;
    }
    p:last-child {
      text-align: center;
      font-size: 0.4rem;
      color: #b4282d;
    }
  }
}
.show{
    padding-top:50px;
    color: #999;
    background-color: #fff;
    margin: 0;
}
</style>